<template>
  <div class="app-container">
    <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="100px" label-position="left">
      <el-form-item label="是否开启配置">
        <el-switch
          v-model="dataForm.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          style="display: block; margin-top: 10px;"
          active-text="开启"
          inactive-text="关闭"
          @change="handleSwitchChange"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="物品">
        <el-row>
          <el-col :md="3"><el-button type="primary" class="add" icon="el-icon-plus" @click="productAdd">新增</el-button></el-col>
        </el-row>
        <el-row
          v-for="(item, index) in dataForm.items"
          :key="index"
          class="mt-5"
          :gutter="12"
        >
          <el-col :md="6">
            <el-select v-model="item.id" clearable filterable placeholder="请选择物品">
              <el-option
                v-for="p in products"
                :key="p.id"
                :label="p.desc"
                :value="p.id"
              />
            </el-select>
          </el-col>
          <el-col :md="8"><el-input v-model="item.num" placeholder="数量" /></el-col>
          <el-col :md="4"><el-button type="danger" icon="el-icon-delete" @click.prevent="remove(item)" /></el-col>
        </el-row>
      </el-form-item>
      <el-button type="primary" :disabled="isDisabled" @click="confirmSubmit()">修改</el-button>
    </el-form>
  </div>
</template>

<script>
import { getEmailConfig, handleEmailConfig, handleEmailConfigStatus } from '@/api/gm'
import { getItemConfig } from '@/api/config'

export default {
  name: 'EmailConfig',
  data() {
    return {
      products: [],
      dataList: [],
      isDisabled: false,
      dataForm: {
        status: false,
        items: [{
          id: '',
          num: ''
        }]
      },
      rules: { }
    }
  },
  created() {
    this.getList()
    this.getItemConfig()
  },
  methods: {
    async getList() {
      const query = this.listQuery
      this.listLoading = true
      const res = await getEmailConfig(query)
      this.listLoading = false
      this.dataForm.items = []
      res.data.forEach((item, i) => {
        const it = {}
        this.dataForm.status = false
        if (item.status === 1) this.dataForm.status = true
        it.id = parseInt(item.item_id)
        it.num = item.num
        this.dataForm.items.push(it)
      })
    },
    handleSwitchChange() {
      let status = 0
      if (this.dataForm.status === true) status = 1
      handleEmailConfigStatus({ 'status': status }).then(response => {
        if (response.status) {
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }
      })
    },
    confirmSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleEmailConfig(this.dataForm).then(response => {
            if (response.status) {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    },
    async getItemConfig() {
      const res = await getItemConfig()
      this.products = res.data.items
    },
    productAdd(row) {
      if (this.dataForm.items.length === 6) {
        return
      }
      this.dataForm.items.push({
        id: '',
        num: ''
      })
    },
    remove(row) {
      var index = this.dataForm.items.indexOf(row)
      if (index !== -1) {
        this.dataForm.items.splice(index, 1)
      }
    }
  }
}
</script>
